<template>
  <div style="padding: 20px">
    <el-form>
      <el-form-item>
        <el-input type="text" v-model="roleId" disabled></el-input>
      </el-form-item>
      <el-form-item>
        <el-tree
          :data="roleMenu"
          :default-expanded-keys="defaultExpandedList"
          :default-checked-keys="defaultCheckedIdList"
          @check="treeItemChecked"
          node-key="id"
          show-checkbox
          :props="{ children: 'children', label: 'name' }"
        >
        </el-tree>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveAll">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { reqGetRoleMenu,reqRoleAssignPermission } from "@/api/role";
import { Message } from 'element-ui';
export default {
  name: "RoleAuth",
  data() {
    return {
      //数据1：动态路由传入的角色id
      roleId: "",
      //数据2：角色菜单
      roleMenu: [],
      //数据3：树状菜单所有的id列表
      defaultExpandedList: [],
      //数据4：树状菜单默认选中的id列表
      defaultCheckedIdList: [],
    };
  },
  methods: {
    //方法1：根据角色获取菜单
    async getRoleMenu() {
      try {
        const result = await reqGetRoleMenu(this.roleId);
        console.log("角色菜单", result.data.children);
        this.roleMenu = result.data.children;
        //收集所有菜单的id
        this.getAllMenuId(this.roleMenu);
        //收集默认被选中的菜单id
        this.getAllSelectedMenuIdList(this.roleMenu);
        console.log("getAllSelectedMenuIdList", this.defaultCheckedIdList);

        console.log("defaultExpandedList", this.defaultExpandedList);
      } catch (error) {}
    },
    //方法2：收集所有菜单的id
    getAllMenuId(list) {
      list.forEach((item) => {
        this.defaultExpandedList.push(item.id);
        //当children存在且长度不为0,递归调用
        if (item.children && item.children.length > 0) {
          this.getAllMenuId(item.children);
        }
      });
    },
    //方法3:收集所有默认被选中的菜单id
    getAllSelectedMenuIdList(list) {
      list.forEach((item) => {
        if (item.select && item.level === 4) {
          this.defaultCheckedIdList.push(item.id);
        }
        //当children存在且长度不为0,递归调用
        if (item.children) {
          this.getAllSelectedMenuIdList(item.children);
        }
      });
    },  
    //方法4:树状图每项 改变选中状态事件
    treeItemChecked(data,checkedData){
      console.log('value',data,checkedData);
      this.defaultCheckedIdList = checkedData.checkedKeys
    },         
    //方法5:保存信息
    async saveAll(){
      //获取id字符串
      var string = this.defaultCheckedIdList.join(",")
      try{
        await reqRoleAssignPermission(this.roleId,string)
        Message.success("保存成功")
        this.$router.push({name:"Role"})
      }catch(e){
        Message.error("保存失败")
      }
      
    },
  },
  mounted() {
    //初始化1：根据角色获取菜单
    this.getRoleMenu();
    // //获取菜单id列表
    // this.getAllMenuId()
  },
  watch: {
    $route: {
      immediate: true,
      handler(value) {
        console.log(value);
        this.roleId = value.params.id;
      },
    },
  },
};
</script>

<style></style>
